<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta  http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>非父子关系传值</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<child content = "qiqi"></child>
			<child content = "qq"></child>
		</div>	
	</body>
	<script type="text/javascript">
		// 这样每个Vue对象都可以访问父级属性bus
		Vue.prototype.bus = new Vue();
		
		Vue.component("child",{
			data: function(){
				return {
					cloneContent: this.content
				}
			},
			props:{
				content: String
			},
			template:'<div @click = "handleClick">{{cloneContent}}</div>',
			methods:{
				handleClick: function () {
					
					// 让__proto__的bus创建和触发一个自定义事件change,并发送消息this.content
					this.bus.$emit('change', this.content);
					
				}
			},
			// 所有的子组件都会执行
			mounted: function () {
				// 保存所有子组件的this指向
				var _this = this;
				
				// 当bus的change被触发时发布拿到的消息value，并对value进行操作
				this.bus.$on('change', function (value) {
					
					// 方法是被bus触发的,域内this指向bus而不是子组件,所以要先在方法外保存this到_this
					_this.cloneContent = value;
				})
			}
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>
</html>